<template>
  <div class="city-guide">
    <mt-header :title="city.name + '的向导'" fixed>
      <router-link to slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>

    <div class="city-banner">
      <img :src="'static/img/server/city/banner/' + city.spell + '.jpg'" />
      <h2 class="city-name">{{city.name}}</h2>
      <h3 class="guide-num">共有{{total}}位向导</h3>
    </div>

    <div v-if="guideList.length != 0" class="guide-content">
      <div class v-for="(item, index) in guideList" :key="index">
        <router-link :to="'/personal/' + item.id + '/read'">
          <my-guide :guide="item"></my-guide>
        </router-link>
      </div>
    </div>
    <div v-else class="not-find">该城市目前还没有向导入驻</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "cityGuide",
  data() {
    return {
      city: {},
      guideList: [],
      total: ""
    };
  },
  components: {},
  mounted() {
    console.log(this.$route.params.cityId);
    axios
      .get("/api/area/detail", {
        params: { id: this.$route.params.cityId }
      })
      .then(res => {
        if (res.status == 200) {
          console.log(res.data);
          this.city = res.data.data;
        }
      });

    axios
      .post("/api/user/list", {
        cityId: this.$route.params.cityId,
        isGuide: "1"
      })
      .then(res => {
        console.log(res.data);
        if (res.status == 200) {
          this.guideList = res.data.data.rows;
          this.total = res.data.data.total;
        }
      });
  }
};
</script>

<style lang="stylus" scoped>
.city-guide {
  height: 100%;
  background-color: #eee;
  padding-top: 40px;
  box-sizing: border-box;

  .city-banner {
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    overflow: hidden;
    background-color: #eee;
    position: relative;

    img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }

    .city-name {
      position: absolute;
      left: 0.3rem;
      bottom: 1rem;
      color: #fff;
      font-size: 26px;
      font-weight: bold;
    }

    .guide-num {
      position: absolute;
      left: 0.3rem;
      bottom: 0.3rem;
      color: #fff;
      font-size: 20px;
    }
  }

  .not-find {
    padding: 0.3rem;
  }
}
</style>
